import React from 'react';
import PropTypes from 'prop-types';
import {
    Menu as MenuIcon,
    MoreVert as MoreVertIcon,
    SettingsApplications as SettingsApplicationsIcon
} from '@material-ui/icons';
import {
    withStyles,Typography,Paper,IconButton,Divider,
    Avatar,
    CardHeader,CardContent
} from '@material-ui/core';

const styles = theme => ({
  root:{
    '& p':{
      margin:'8px 0 0'
    },
  },
  item:{
    lineHeight:"1rem",
    marginBottom:"8px",
    '& .MuiCardContent-root':{
      height:'74px'
    },
    '&:hover':{
      boxShadow:'0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12)'
    },
    '& .pro_name':{
      color:"#444",
      fontSize:"1.1rem",
      fontWeight:600
    }
  },
  cell_name:{width:"280px",paddingRight:"8px"},
  cell_action:{
    paddingLeft:"16px",
    '& .icon':{
      color:'#444'
    }
  }
});

function Content(props) {
  const { classes } = props;

  return (
    <Paper className={classes.root}>
      <CardHeader
        avatar={
          <Avatar aria-label="recipe" className="">G</Avatar>
        }
        action={
          <IconButton aria-label="settings" >
            <MoreVertIcon />
          </IconButton>
        }
        title={<span className="h5">默认分组</span>}
        subheader={
            <>
            </>
          }
      />
      <Divider />
      <CardContent>
        <Paper className={classes.item} >
          <CardContent className="flex-r gray" style={{padding:"16px"}}>
            <div className={"flex-one overflow-text "+classes.cell_name}>
              <a className="link2 pro_name" >Buzzy-map</a>
              <p><SettingsApplicationsIcon className="icon"/> k8s-103</p>
            </div>
            <div className="flex-box">
              <span className={"overflow-text "+classes.cell_ip}>172.17.0.8:8001</span>
            </div>
            <div className="flex-box">
              <span className={"overflow-text "+classes.cell_version}>100%->V 0.3.0</span>
            </div>
            <Divider orientation="vertical"/>
            <div className={"flex-one "+classes.cell_action}>
              <IconButton ><MenuIcon className="icon"/></IconButton>
            </div>
          </CardContent>
        </Paper>
      </CardContent>
    </Paper>
  );
}

Content.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Content);
